| vue | 您所在的位置：网站首页 › 二、configureWebpack函数形式 › vue |
vue
|
调整 webpack 配置最简单的方式就是在 vue.config.js 中的 configureWebpack 选项提供一个对象： // vue.config.js module.exports = { configureWebpack: { plugins: [ new MyAwesomeWebpackPlugin() ] } }该对象将会被 webpack-merge 合并入最终的 webpack 配置。 如果你需要基于环境有条件地配置行为，或者想要直接修改配置，那就换成一个函数 (该函数会在环境变量被设置之后懒执行)。该方法的第一个参数会收到已经解析好的配置。在函数内，你可以直接修改配置，或者返回一个将会被合并的对象： // vue.config.js module.exports = { configureWebpack: config => { if (process.env.NODE_ENV === 'production') { // 为生产环境修改配置... } else { // 为开发环境修改配置... } } } 链式操作 (高级)Vue CLI 内部的 webpack 配置是通过 webpack-chain 维护的。这个库提供了一个 webpack 原始配置的上层抽象，使其可以定义具名的 loader 规则和具名插件，并有机会在后期进入这些规则并对它们的选项进行修改。 它允许我们更细粒度的控制其内部配置。接下来有一些常见的在 vue.config.js 中的 chainWebpack 修改的例子。 修改 Loader 选项 // vue.config.js module.exports = { chainWebpack: config => { config.module .rule('vue') .use('vue-loader') .loader('vue-loader') .tap(options => { // 修改它的选项... return options }) } } 添加一个新的 Loader // vue.config.js module.exports = { chainWebpack: config => { // GraphQL Loader config.module .rule('graphql') .test(/\.graphql$/) .use('graphql-tag/loader') .loader('graphql-tag/loader') .end() // 你还可以再添加一个 loader .use('other-loader') .loader('other-loader') .end() } } 替换一个规则里的 Loader // vue.config.js module.exports = { chainWebpack: config => { const svgRule = config.module.rule('svg') // 清除已有的所有 loader。 // 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。 svgRule.uses.clear() // 添加要替换的 loader svgRule .use('vue-svg-loader') .loader('vue-svg-loader') } } 修改插件选项 // vue.config.js module.exports = { chainWebpack: config => { config .plugin('html') .tap(args => { return [/* 传递给 html-webpack-plugin's 构造函数的新参数 */] }) } }你需要熟悉 webpack-chain 的 API 并阅读一些源码以便了解如何最大程度利用好这个选项，但是比起直接修改 webpack 配置，它的表达能力更强，也更为安全。 比方说你想要将 index.html 默认的路径从 /Users/username/proj/public/index.html 改为 /Users/username/proj/app/templates/index.html。通过参考 html-webpack-plugin 你能看到一个可以传入的选项列表。我们可以在下列配置中传入一个新的模板路径来改变它： // vue.config.js module.exports = { chainWebpack: config => { config .plugin('html') .tap(args => { args[0].template = '/Users/username/proj/app/templates/index.html' return args }) } } chainWebpack 常用操作快速记忆
除了上述使用 chainWebpack 来改变 webpack 内部配置外，我们还可以使用 configureWebpack 来进行修改，两者的不同点在于 chainWebpack 是链式修改，而 configureWebpack 更倾向于整体替换和修改。示例代码如下： // vue.config.js module.exports = { ... // config 参数为已经解析好的 webpack 配置 configureWebpack: config => { // config.plugins = []; // 这样会直接将 plugins 置空 // 使用 return 一个对象会通过 webpack-merge 进行合并，plugins 不会置空 return { plugins: [] } } ... }configureWebpack 可以直接是一个对象，也可以是一个函数，如果是对象它会直接使用 webpack-merge 对其进行合并处理，如果是函数，你可以直接使用其 config 参数来修改 webpack 中的配置，或者返回一个对象来进行 merge 处理。 vue-cli3 已经有的优化 首先，通过官方文档中的配置参考可以了解到一部分默认配置。通过 vue-inspect 命令，可以查看默认的webpack配置。例如babel-loader，已经配置了exclude，并且开启了cacheDirecorty，那么不用考虑优化loader了。 其次，从Vue-cli官方文档中，注意到parallel这个配置有如下说明。 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。 此外，webpack4中，mode为production时会自动开启代码压缩和Tree Shaking。 |
【本文地址】